*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.workList {
  width: 100%;
  min-height: 20vh;
  max-height: 100vh;
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
  counter-reset: work;
}

.work {
  width: 24%;
  height: 20vh;
  margin: 0.5%;
  background-color: rgb(235, 233, 233);
  counter-increment: work;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.work:nth-child(0) {
  background: url("../img/0.jpg");
  background-size: cover;
}
.work:nth-child(1) {
  background: url("../img/1.jpg");
  background-size: cover;
}
.work:nth-child(2) {
  background: url("../img/2.jpg");
  background-size: cover;
}
.work:nth-child(3) {
  background: url("../img/3.jpg");
  background-size: cover;
}
.work:nth-child(4) {
  background: url("../img/4.jpg");
  background-size: cover;
}
.work:nth-child(5) {
  background: url("../img/5.jpg");
  background-size: cover;
}
.work:nth-child(6) {
  background: url("../img/6.jpg");
  background-size: cover;
}
.work:nth-child(7) {
  background: url("../img/7.jpg");
  background-size: cover;
}
.work:nth-child(8) {
  background: url("../img/8.jpg");
  background-size: cover;
}
.work::after {
  content: counter(work);
  text-align: right;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: 8rem;
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  mix-blend-mode: color;
  color: hsla(0deg, 100%, 100%, 0.8);
  transform: translate(0, 0.5em);
  will-change: transform;
  transition: transform 0.5s;
}
.work:hover::after {
  transform: translate(0, 0);
}/*# sourceMappingURL=content_20220226185836.css.map */